class = " " . id = " " .| Seletor | Tipo de Seletor | Aplicado em |
|---|---|---|
| a | HTML | Todas as tags especificadas no HTML. |
| .minhaClasse | Classe | Qualquer tag HTML que tenha a Classe especificada. |
| a.minhaClasse | Dependência de Classe | Tag HTML especificada que tenha a Classe especificada. |
| #meuID | Identificadores | Qualquer tag HTML que tenha o ID especificado. |
| a#meuID | Dependência de Identificadores | Tag HTML especificada que tenha o ID especificado. |
| * | Universal | Todas as tags HTML. |
<style> ... </style>.seletor {
propriedade: valor;
}
p {
color: #ff1493;
}
a {
background-color: #ff1493;
}
.rodape {
color: #ff1943;
}
p.rodape {
color: #ff1943;
}
.cabecalho {
background-color: blue;
}
#texto {
color: #ff1943;
}
#imagem {
color: #ff1943;
background-color: blue;
}
p#texto {
color: #ff1943;
background-color: black;
}
color¶color: valor;color. É aplicada sobre o texto, conteúdo.color¶color picker.seletor {
color: blue;
}
seletor {
color: white;
}
transparent. seletor {
color: transparent;
}
current.seletor {
color: currentColor;
}
#ffffff em hexadecimal. seletor {
color: #fff;
}
RGB (red, green, blue) em decimal. seletor {
color: rgb(255, 104, 154);
}
RGBA (red, green, blue, a) em decimal com definição de opacidade (varia de 0 a 1). seletor {
color: rgba(255, 104, 154, 0.5);
}
CMYK em percentagem. seletor {
color: cmyk(0%, 26%, 99%, 1%);
}
HSL (hue - matiz, saturation - saturação, lightness - brilho). seletor {
color: hsl(16°, 65%, 100%);
}
HSLA (hue - matiz, saturation - saturação, lightness - brilho, a) com opacidade (varia de 0 a 1).seletor {
color: hsla(16°, 65%, 100%, 0.37);
}
background¶background¶background: valores;Para formatarmos o plano de fundo das imagens, itens, utilizamos a propriedade css de background.
Para maiores conhecimentos, consulte CSS-Tricks.
E para exemplos de padrões de background, consulte CSS3 Patterns Gallery.
A propriedade background permite controlar o plano de fundo de qualquer elemento. Também, é uma propriedade abreviada, em uma única linha configuramos todo o background. Exemplo:
body {
background:
url(imagens/elefante.jpg) /* image */
top center / 200px 200px /* position size */
no-repeat /* repeat */
fixed /* attachment */
padding-box /* origin */
content-box /* clip */
red; /* color */
}
background-image: Define uma imagem de fundo.
background-position: 0 0. Permitido pixels, percentuais ou posições (top, bottom, left, right).
background-size: Define as dimensões da imagem no box.
background-repeat:Define a maneira como a imagem de fundo é posicionada.
background-attachment: O valor padrão é scroll.
background-origin: Define a posição de origem da imagem no box.
background-clip: Define a área do box onde a imagem de fundo é aplicada.
background-color: Define a cor do fundo.
body {
background: url(elefante.jpg), url(casa.jpg) black;
background-repeat: repeat-x, no-repeat;
}
--cor-perigo: red;
--bordacolorida: 2px solid blue;
--margem-definida: 2.5em;
--maiusculo: uppercase;
var seguida de parênteses. E dentro destes, o nome da variável criada.div {
border: var( bordacolorida );
margin: var( --margem-definida );
text-transform: var( --maiusculo );
}
Outro ponto importante é a definição de um escopo de variáveis CSS.
Seletor CSS:
:root: neste caso o escopo das variáveis é o seletor :root que é a raiz do documento, ou seja a página. Contexto para a página toda.
:root {
--cor-perigo: red;
--bordacolorida: 2px solid blue;
--margem-definida: 2.5em;
--maiusculo: uppercase;
}
footer {
--minha-cor-fundo: black;
--minha-cor: red;
--minha-largura: 40%;
}
seletor {
background-color: var( --cor, black );
}
.component {
--cor-texto: green; /* Notar que --cor-header não foi declarada */
}
/* Regras de estilo */
.component .header {
color: var(--cor-header, blue); /* estiliza na cor blue, pois --cor-header não foi declarada */
}
.component .text {
color: var(--cor-texto, black); /* estiliza na cor green, pois --cor-texto foi declarada */
}
!important que ao ser usada em um valor de variável não a invalida, contudo não altera o efeito cascata e nem a especificidade da regra CSS, ou seja, não cumpre sua finalidade, portanto não use essa diretiva ao declarar as variáveis.p { color: red !important; }
seletor: de HTML, Classes e Identificadores.pseudo-classe: Índice de Pseudo-classes padrão.propriedade: é a propriedade css com seu respectivo valor./* Exemplo arquivo .css */
seletor:pseudo-classe {
propriedade: valor;
}
/* Seleciona qualquer <input> requerido */
input:required {
border: 1px dashed red;
}
<!-- Parte de um código de arquivo .html -->
<head>
<style>
/* Seleciona a última tag <p> com tag <em> como filho */
p em:last-of-type {
color: red;
}
</style>
</head>
<body>
<p>
<em>Eu não sou vermelho :(</em>
<strong>Eu não sou vermelho :(</strong>
<em>Eu sou vermelho. Sou o último do tipo neste parágrafo :D</em>
<strong>Eu quase sou vermelho :(</strong>
</p>
</body>
Figura 1: Exemplos de uso de pseudo-classes
 |
| Fonte: Autoria própria |
ADS - HTML5, CSS3, JS.
Modelo e formato elaborado pela profa. Ana Paula Müller Giancoli - BSD 2-Clause License. - Julho.2022.